<!-- 分类 -->
<template>
	<view class="category-box">
		<view class="shop-list">
			<view class="shop-list-item"  v-for="(store,indx) in storeList" :key="indx" @tap="jump('/pages/category/detail',{id:store.id})">
				<view class="shop-item-top">
					<view class="item-top-left">
					  <image :src="store.store.image_first" mode="aspectFill" class="item-top-img"></image>
					  <text class="item-top-name">{{store.store.name}}</text>
					</view>
					<view class="item-top-right">
						{{store.createtime_str}}
					</view>
				</view>
				<view class="shop-item-box">
					<view class="item-box-title">{{store.title}}</view>
					<view class="item-box-desc">{{store.subtitle}}</view>
					<view class="item-box-list">
						<image :src="$IMG_URL+item" mode="aspectFill" class="item-img" v-for="(item,index) in store.images_arr" :key="index"></image>
					</view>
				</view>
			</view>
			<!-- 缺省页 -->
			<shopro-empty marginTop="300rpx" v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无数据"></shopro-empty>
		</view>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			storeList:[],
			isEmpty:false
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
	},
	onLoad() {
		this.getStoreList();
	},
	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData' ,'logout']),
		getStoreList() {
			let that = this;
			that.$https('store.storeNew', {store_id:1}, '加载中...').then(res => {
				if (res.code == 1) {
					that.storeList = res.data.data;
					this.isEmpty=!that.storeList.length
				}
			});
		},
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
	}
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
	.shop-list-item{
		margin:36rpx 36rpx 0;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		.shop-item-top{
			display: flex;justify-content: space-between;
			align-items: center;
			.item-top-left{
				display: flex;
				align-items: center;
				.item-top-img{
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
				.item-top-name{
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 550;
					color: #010101;
					margin-left: 10rpx;
				}
			}
			.item-top-right{
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8E8E8E;
			}
		}
		.shop-item-box{
			.item-box-title{
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #010101;
				line-height: 48rpx;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
			}
			.item-box-desc{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8E8E8E;
				margin-bottom: 30rpx;
			}
			.item-box-list{
				display: flex;
				justify-content: space-between;
				.item-img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>
